<!--充值模板-->

<template>
    <div>
        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-col :span="6">
                <el-input v-model="filters.templateName" placeholder="请输入模版名称" clearable></el-input>
            </el-col>
            <el-col :span="6">
                <el-select v-model="filters.defaultFlag" placeholder="请选择应用默认模版" clearable style="width: 100%;">
                    <el-option label="是" value="YES"></el-option>
                    <el-option label="否" value="NO"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-select v-model="filters.status" placeholder="请选择状态" clearable style="width: 100%;">
                    <el-option label="启用" value="OFF"></el-option>
                    <el-option label="停用" value="ON"></el-option>
                </el-select>
            </el-col>
            <el-col :span="6">
                <el-button type="primary" @click="search">搜索</el-button>
                <el-button @click="reset">重置</el-button>
            </el-col>
        </el-row>

        <el-row :gutter="20" style="margin-bottom: 20px;">
            <el-button style="margin-left: 20px" type="primary" @click="addTemplate">新增</el-button>
            <el-button type="warning" @click="exportTemplates">导出</el-button>
        </el-row>

        <el-table :data="tableData" style="width: 100%">
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column prop="templateName" label="模版名称"></el-table-column>
            <el-table-column prop="templateType" label="模版类型"></el-table-column>
            <el-table-column prop="templateLevel" label="模版层级">
                <template #default="{ row }">
                    <el-tag :type="row.level === 'SYSTEM ' ? 'danger' : 'success'">{{ row.level }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="showCount" label="显示项数"></el-table-column>
            <el-table-column prop="status" label="状态">
                <template #default="{ row }">
                    <el-tag :type="row.status === 'ON' ? 'success' : 'info'">{{ row.status }}</el-tag>
                </template>
            </el-table-column>
            <el-table-column prop="remark" label="备注"></el-table-column>
            <el-table-column label="充值档位操作" width="180">
                <template #default="{ row }">
                    <el-link type="primary" @click="edit(row)">配置</el-link>
                    <el-link style="margin-left: 20px" type="primary" @click="view(row)">档位预览</el-link>
                </template>
            </el-table-column>
            <el-table-column label="模版操作">
                <template #default="{ row }">
                    <el-link type="primary" @click="openEditDialog(row)">修改</el-link>
                    <el-link style="margin-left: 20px" type="primary" @click="disableTemplate(row)">禁用</el-link>
                </template>
            </el-table-column>
        </el-table>

        <div style="margin-top: 20px; display: flex; justify-content: flex-end;">
            <el-pagination
                    v-model:current-page="filters.pageNum"
                    v-model:page-size="filters.pageSize"
                    :page-sizes="[10, 20, 30, 40]"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total"
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
            />
        </div>


        <el-dialog v-model="editDialogVisible" title="修改充值模版" width="500px">
            <el-form :model="editForm">
                <el-form-item label="模版名称" :label-width="formLabelWidth" required>
                    <el-input v-model="editForm.templateName"></el-input>
                </el-form-item>
                <el-form-item label="显示项数" :label-width="formLabelWidth">
                    <el-input v-model="editForm.showCount"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="editForm.status">
                        <el-radio label="启用" value="ON">启用</el-radio>
                        <el-radio label="停用" value="OFF">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="editForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" style="margin-left: 300px">
                <el-button @click="editDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitEdit">确定</el-button>
            </span>
        </el-dialog>

        <el-dialog v-model="addDialogVisible" title="新增充值模版" width="500px">
            <el-form :model="addForm">
                <el-form-item label="模版名称" :label-width="formLabelWidth" required>
                    <el-input v-model="addForm.templateName"></el-input>
                </el-form-item>
                <el-form-item label="显示项数" :label-width="formLabelWidth">
                    <el-input v-model="addForm.showCount"></el-input>
                </el-form-item>
                <el-form-item label="状态" :label-width="formLabelWidth">
                    <el-radio-group v-model="addForm.status">
                        <el-radio label="启用" value="ON">启用</el-radio>
                        <el-radio label="停用" value="OFF">停用</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item label="备注" :label-width="formLabelWidth">
                    <el-input type="textarea" v-model="addForm.remark"></el-input>
                </el-form-item>
            </el-form>
            <span slot="footer" style="margin-left: 300px">
                <el-button @click="addDialogVisible = false">取消</el-button>
                <el-button type="primary" @click="submitAdd">确定</el-button>
            </span>
        </el-dialog>
    </div>
</template>

<script setup>
    import {onMounted, ref} from 'vue';
    import {searchModules,updateModules,addModules,deleteModules} from "../../api/recharge/module";
    import {baseApi} from "../../api/base";
    import { ElMessage, ElMessageBox } from 'element-plus';
    import router from "../../router";

    const templateName = ref('');
    const selectedVersion = ref('');
    const selectedStatus = ref('');

    const tableData = ref([{
        templateName:'',
        templateType:'',
        templateLevel:'',
        showCount:'',
        status:'',
        remark:''
    }]);

    const filters=ref({
        templateName:'',
        defaultFlag:'',
        status:'' ,
        pageSize:10,
        pageNum:1
    })
    const total = ref(0);
    const currentPage = ref(1);
    const pageSize = ref(10);

    const editDialogVisible = ref(false);

    const addDialogVisible = ref(false);
    const editForm = ref({
        name: '',
        count: '',
        status: '启用',
        remarks: ''
    });

    const addForm = ref({
        templateName: '',
        count: '',
        status: '启用',
        remarks: ''
    });
    const formLabelWidth = '120px';

    const search = () => {
        searchModules(filters.value).then((res=>{
            console.log(res)
            tableData.value=res.data.data.currentData
            total.value=res.data.data.totalRecord
        }))
    };

    const reset = () => {
        templateName.value = '';
        selectedVersion.value = '';
        selectedStatus.value = '';
    };

    const addTemplate = () => {
        addDialogVisible.value=true

    };

    const exportTemplates = () => {
        ElMessage.success('导出功能尚未实现');
    };

    const edit = (row) => {
        router.push('/main/TopUpSlots')
    };

    const view = (row) => {
        router.push('/main/TopUpSlots')
    };

    const openEditDialog = (row) => {
        editForm.value = { ...row };
        editDialogVisible.value = true;
    };
    //修改
    const submitEdit = () => {
        ElMessage.success(`模版 ${editForm.value.name} 修改成功`);
        editDialogVisible.value = false;
    };
    //新增
    const submitAdd = () => {
        baseApi(addModules(addForm.value),()=>{
            searchModules(),addDialogVisible.value = false;
        })
    };

    const disableTemplate = (row) => {
        ElMessageBox.confirm('此操作将禁用该模板, 是否继续?', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning',
        }).then(() => {
            ElMessage.success(`禁用 ${row.name}`);
            // Implement delete logic here
        }).catch(() => {
            // Handle cancel action
        })
    };

    const handleSizeChange = (size) => {
        ElMessage.success(`每页显示 ${size} 条`);
    };

    const handleCurrentChange = (page) => {
        ElMessage.success(`跳转到第 ${page} 页`);
    };
    onMounted(() => {
        search();
    });
</script>

<style scoped>
    .pagination-container {
        margin-top: 20px;
        display: flex;
        justify-content: center;
        width: 100%;
    }
    .dialog-footer {
        text-align: right;
    }
</style>
